/*
 * @Autor: lingchen.liu
 * @Date: 2022-02-08 14:16:07
 * @LastEditors: lingchen.liu
 * @LastEditTime: 2022-02-11 10:36:39
 * @emial: lingchen.liu@bizfocus.cn
 */
import React, { FC, ReactElement, useCallback, useEffect, useState } from 'react';
import MyHeader from './components/Header';
import './App.css';
import AddInput from './components/AddInput';
import TodoItem from './components/TodoItem';
import { ITodo } from './types';
import CheckModal from './components/Modal/CheckModal';
import EditModal from './components/Modal/EditModal';
import NoDataTip from './components/NoDataTip';

// export interface IProps {
//     // 以下两个函数在父组件中并未使用 所以只需子组件中定义
//     // setInput: () => void;
//     // openInput: () => void;

// }
const App: FC = (): ReactElement => {

    const [isInputShow, setInputShow] = useState(false);
    const [todoList, setTodoList] = useState<ITodo[]>([]);
    const [isShowCheckModal, setShowCheckModal] = useState(false);
    const [isShowEditModal, setShowEditModal] = useState(false)
    const [currentData, setCurrentData] = useState({
        id: 1,
        content: '',
        completed: false
    });

    useEffect(() => {
        const todoData = JSON.parse(localStorage.getItem('todoList') || '[]')
        setTodoList(todoData)
    }, [])

    useEffect(() => {
        localStorage.setItem('todoData', JSON.stringify(todoList))
    }, [todoList])

    const addItem = useCallback((value): void => {
        const dataItem = {
            id: new Date().getTime(),
            content: value,
            completed: false
        }
        setTodoList((todoList) => [...todoList, dataItem]);
        setInputShow(false)
    }, []);

    const completeItem = useCallback((id): void => {
        setTodoList((todoList) => todoList.map((item) => {
            if (item.id !== id) {
                item.completed = !item.completed;
            }
            return item;
        }));

    }, [])



    const openCheckModal = (
        (id: number): void => {
            setCurrentData(() => todoList.filter((item) => item.id === id)[0])
            setShowCheckModal(true)
        }
    )

    const openEditModal = (
        (id: number): void => {
            setCurrentData(() => todoList.filter((item) => item.id === id)[0])
            setShowEditModal(true)
        }
    )

    const removeItem = (
        (id: number) => {
            setTodoList((todoList) => todoList.filter((item) => item.id !== id))
        }
    )

    const submitEdit = (
        (newData: any, id: number): any => {
            setTodoList((todoList) =>
                todoList.map((item) => {
                    if (item.id === id) {
                        item = newData;
                    }
                    return item;
                })
            );
            setShowEditModal(false)
        }
    )

    return (
        <div className="App">
            <CheckModal
                isShowCheckModal={isShowCheckModal}
                data={currentData}
                closeModal={() => setShowCheckModal(false)}
            />
            <EditModal
                isShowEditModal={isShowEditModal}
                data={currentData}
                submitEdit={submitEdit}
            />

            <MyHeader openInput={() => setInputShow(!isInputShow)} />
            <AddInput isInputShow={isInputShow} addItem={(value) => addItem(value)} />
            {!todoList || todoList.length === 0 ? (
                <NoDataTip />
            ) : (
                <ul className='todo-list'>
                    {
                        todoList.map((item: ITodo) => {
                            return (
                                <TodoItem
                                    dataItem={item}
                                    key={item.id}
                                    completeItem={completeItem}
                                    openCheckModal={openCheckModal}
                                    openEditModal={openEditModal}
                                    removeItem={removeItem}
                                />
                            )
                        })
                    }
                </ul>
            )}
        </div>
    );
}

export default App;
